<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>CSS위치표시여부</title>
	</head>
	<body>
		<h1>CSS위치표시여부</h1>
		<h2>CSS 위치 지정: position</h2>
		<p>html 요소를 어떻게 배치할지를 정의</p>
		<p>위치지정은 position, top, left 속성을 이용</p>
		<p>static : 문서 내용의 흐름에 따라 배치(위-아래)</p>
		<div style="width: 250px; height: 150px; background: red;
		position: static; top: 300px; left: 300px"> static </div>
		<hr />
		<p>absolute : 조상요소(ancestor element)(body)를 기준으로 배치</p>
		<div style="width: 250px; height: 150px; background: orange;
		position: absolute; top: 300px; left: 300px"> absolute </div>
		<hr />
		<p>relative : 현재 위치에서 지정한 위치로 이동</p>
		<div style="width: 250px; height: 150px; background: #800080;
		position: relative; top: 300px; left: 300px"> absolute </div>
		<hr />
		<p>fixed : 지정한 위치에서 고정함(absolute + 고정)</p>
		<div style="width: 250px; height: 150px; background: yellow;
		position: fixed; top: 300px; left: 300px"> fixed </div>
		<hr />
		<h2>요소 겹치기 : z-index</h2>
		<p>absolute, relative, fixed 에서만 요소를 겹칠 수 있음</p>
		<div style="width: 250px; height: 150px; background: green;
		position: relative; top: 0; left: 0;"> #1 </div>
		<div style="width: 250px; height: 150px; background: indigo;
		position: relative; top: -50px; left: 50px; z-index: 10"> #2 </div>
		<div style="width: 250px; height: 150px; background: gold;
		position: relative; top: -100px; left: 100px;"> #3 </div>
		<hr />
		<h2>요소 표시하기 : display, visibility</h2>
		<p>display : none / block / inline - 요소가 차지한 영역도 제거</p>
		<p>visibility : hidden / visible - 요소가 차지한 영역은 남음</p>
		<div style="width: 100px; height: 150px; background: red;
		border: 1px solid navy; float: left;"> display : remove </div>
		<div style="width: 100px; height: 150px; background: orange;
		border: 1px solid navy; float: left; visibility: hidden"> visibility : hidden </div>
		<div style="width: 100px; height: 150px; background: yellow;
		border: 1px solid navy; float: left;"> 고정 </div>
		<hr />
		<h2>display 속성 : 박스모델의 유형을 정의</h2>
		<p>block : 현재 요소를 블럭요소로 보이게 함</p>
		<p>inline : 현재 요소를 인라인 요소로 보이게 함</p>
		<p>inline-block : 현재 요소는 인라인 요소로 보이게 하되 블럭 요소의 특성을 사용할 수 있게 함</p>
		<p>시간은 <span style="background: orange; display: block">금이라구,</span> 친구!!</p>
		<div>시간은 <p style="background: orange; display: inline">금이라구,</p> 친구!!</div>
		<div style="background: yellow;
		display: inline-block">시간은 <p>금이라구,</p> 친구!!</div>
		<span>아아아앙
			<div style="background: yellow;
			display: inline-block">시간은 <p>금이라구,</p> 친구!!">
			</div>
		</span>
	</body>
</html>